<template>
    <div class="update-password">
        <div class="password-item">
            <label for>
                {{ $t('components.appUpdatePassword.oldPwd') }}
                <Input type="password" v-model="oldPwd" @on-blur="oldPwdVaild" />
            </label>
        </div>
        <div class="password-item">
            <label for>
                {{ $t('components.appUpdatePassword.newPwd') }}
                <Input type="password" v-model="newPwd" @on-blur="newPwdVaild" />
            </label>
        </div>
        <div class="password-item">
            <label for>
                {{ $t('components.appUpdatePassword.confirmPwd') }}
                <Input type="password" v-model="confirmPwd" :disabled="!this.newPwd" @on-blur="confirmVaild" />
            </label>
        </div>
        <div class="password-item password-btn">
            <Button type="primary" long :disabled="!oldPwd || !newPwd || !confirmPwd || disUpdate" @click="updatePwd">{{
                $t('components.appUpdatePassword.sure')
            }}</Button>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator';
import { Subject } from 'rxjs';
import { AppModal } from '@/utils';
import EntityService from '@/service/entity-service';
@Component({})
export default class AppUpdatePassword extends Vue {
    /**
     * 原密码
     *
     * @public
     * @memberof AppUpdatePassword
     */
    public oldPwd: string = '';

    /**
     * 新密码
     *
     * @public
     * @memberof AppUpdatePassword
     */
    public newPwd: string = '';

    /**
     * 确认密码
     *
     * @public
     * @memberof AppUpdatePassword
     */
    public confirmPwd: string = '';

    /**
     * 是否能禁用确认修改
     *
     * @public
     * @memberof AppUpdatePassword
     */
    public disUpdate: boolean = true;

    /**
     * 校验输入的原密码是否为空
     *
     * @public
     * @memberof AppUpdatePassword
     */
    public oldPwdVaild() {
        if (!this.oldPwd) {
            this.$Notice.error({
                title: this.$t('components.appUpdatePassword.oldPwdErr') as string,
                duration: 3,
            });
        }
    }

    /**
     * 校验输入的新密码是否为空
     *
     * @public
     * @memberof AppUpdatePassword
     */
    public newPwdVaild() {
        if (!this.newPwd) {
            this.$Notice.error({
                title: this.$t('components.appUpdatePassword.newPwdErr') as string,
                duration: 3,
            });
        }
    }

    /**
     * 校验确认密码与新密码是否一致
     *
     * @public
     * @memberof AppUpdatePassword
     */
    public confirmVaild() {
        if (this.newPwd && this.confirmPwd) {
            if (this.confirmPwd !== this.newPwd) {
                this.$Notice.error({
                    title: this.$t('components.appUpdatePassword.confirmPwdErr') as string,
                    duration: 3,
                });
            } else {
                this.disUpdate = false;
            }
        }
    }

    /**
     * 实体服务对象
     *
     * @protected
     * @type {EntityService}
     * @memberof AppUpdatePassword
     */
    protected entityService: EntityService = new EntityService();

    /**
     * 修改密码
     *
     * @public
     * @memberof AppUpdatePassword
     */
    public updatePwd() {
        const post: Promise<any> = this.entityService.changPassword(null, { oldPwd: this.oldPwd, newPwd: this.newPwd });
        post.then((response: any) => {
            if (response && response.status === 200) {
                this.$emit('close');
            }
        }).catch((error: any) => {
            this.$Notice.error({
                title: this.$t('app.codeNotExist.sysException') as string,
                duration: 3,
            });
            console.error(error);
        });
    }
}
</script>

<style lang="less">
@import './app-update-password.less';
</style>
